<template>
  <div class="detail" v-if="detailData">
    <header>
      <span>{{ $t("dialog.profile_task.title") }}</span>
      <IconArrowRight fill="#4a4c4e" class="svg" @click="goto(-1)" />
    </header>
    <main>
      <div class="inner">
        <div class="task-header">
          <div class="id">{{ $t("tag.task") }}ID：{{ detailData.task_no }}</div>
          <div class="status">
            {{ detailData.status_title }}
          </div>
        </div>
        <div class="divider-line"></div>
        <div class="title">
          {{ detailData.title }}
        </div>
        <div class="grid">
          <div class="detail-item">
            <div class="label">{{ $t("table.profile_task.col_2") }}：</div>
            <div class="content">
              {{ detailData.member_last_name + ' ' + detailData.member_first_name }}
            </div>
          </div>
          <div class="detail-item">
            <div class="label">{{ $t("content.task.receiver") }}：</div>
            <div class="content">
              {{
                detailData.receive_last_name +' '+ detailData.receive_first_name ||
                $t("tag.none")
              }}
            </div>
          </div>
          <div class="detail-item">
            <div class="label">
              {{ $t("dialog.profile_task.task_progress") }}：
            </div>
            <div class="time">{{ detailData.create_time.split(" ")[0] }}</div>
          </div>
        </div>
        <div class="content raw-html">
          <div class="ql-editor" v-html="detailData.content"></div>
        </div>
      </div>
    </main>
    <div class="footer" v-if="memberStore.profile">
      <div>
        <a-button type="primary" @click="onClickReceiveBtn" class="w-100">{{
          $t("btnText.imed_receive_task")
        }}</a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import {
  postTaskCommentList,
  postTaskDetail,
  postTaskReceive,
} from "../../api/task";
import {
  getCurrentInstance,
  nextTick,
  onBeforeMount,
  onMounted,
  ref,
} from "vue";
import { useMemberStore } from "../../store";
import { message, Modal } from "ant-design-vue";

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const memberStore = useMemberStore();

const route = useRoute();

const detailData = ref();
const getDetailData = async () => {
  let id = route.query.id * 1;
  let res = await postTaskDetail(id);
  if (res.code == 200) {
    detailData.value = res.data;
  }
};
getDetailData();

const onClickReceiveBtn = () => {
  if (!memberStore.profile) return message.warning($t("message.wait_login"));
  let last_name = memberStore.profile.last_name;
  let first_name = memberStore.profile.first_name;
  if (!last_name || !first_name) {
    message.warning($t("message.perfect_information"));
    if (isMobile()) {
      goto("/mobile/updateName");
      return;
    }
    goto("/member/account", {
      update: "nickname",
    });
    return;
  }
  if (detailData.value.member_id == memberStore.profile.id)
    return message.warning($t("message.task_receive_error_self"));
  Modal.confirm({
    title: `${$t("btnText.ensure_receive_task")}？`,
    okText: $t("btnText.ensure_receive_task"),
    cancelText: $t("btnText.cancel_receive_task"),
    maskClosable: true,
    centered: isMobile(),
    async onOk() {
      let res = await postTaskReceive(detailData.value.id);
      if (res.code === 200) {
        message.success($t("message.success.task.receive"));
      } else if (res.code == 400) {
        message.warning($t("message.warning.repeat_receive"));
      } else {
        message.error($t("message.error.unkown"));
      }
      goto(-1);
    },
    onCancel() {
    },
  });
};
</script>
<style scoped lang="less">
header {
  text-align: center;
  line-height: 250px;
  height: 250px;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  .svg {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 2.5%;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
  }
}
.footer {
  height: 250px;
  background-color: #f6f8fa;
  div {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .ant-btn {
    border-radius: 0px !important;
    background-color: #0aa9a9 !important;
  }
}
main {
  font-size: 72px;
  padding: 82px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 250px);
  .inner {
    padding: 82px;
    border-radius: 40px;
    background-color: #fff;
    .detail-item {
      display: flex;
      align-items: center;
      .label {
        flex-shrink: 0;
      }
      & > *:last-child {
        color: #f70202;
      }
    }
    .task-header {
      display: flex;
      gap: 40px;
      align-items: center;
      justify-content: space-between;
      .status {
        color: #0aa9a9;
        flex-shrink: 0;
      }
    }
    .title {
      // word-break: break-all;
      // text-overflow: ellipsis;
      // -webkit-line-clamp: 2;
      // -webkit-box-orient: vertical;
      // display: -webkit-box;
      // overflow: hidden;
      font-size: 82px;
      margin-bottom: 82px;
    }
    .raw-html {
      margin-top: 82px;
    }
  }
  .grid {
    display: flex;
    flex-wrap: wrap;
    & > * {
      width: 50%;
      margin-bottom: 40px;
      padding-right: 40px;
      &:nth-child(even) {
        padding-left: 40px;
        padding-right: 0;
      }
      &:last-child {
        width: 100%;
        margin-bottom: 0;
      }
    }
  }
}
</style>
